import Component from "../Component.js";

export default class Filter extends Component {
    constructor() { super(); }

    async getDataByPageNO() {
        const config = this.algo.getConfig();
        if (config == null) {
            this.toast('请优先选择煤矿。');
            return;
        }

        const name = this.$$("#tunnel-filter-name").val();
        const filter = {
            mineCode: config.mine_code,
            tunnelName: name
        }
        const data = await this.api.getAllTunnelList(filter);
        const tunnels = data.data;

        this.$$("#tunnel-filter-table-page").html(`总计: ${this.pageNum}页, 当前: ${this.pageNo}页`);
        this.$$("#tunnel-filter-table").empty();
        for (let i = 0; i < tunnels.length; i++) {
            const item = tunnels[i], id = `tunnel-filter-table-${i}`;
            let tr= `
                <tr id="${id}">
                    <td class="label-cell">${i + 1}</td>
                    <td class="label-cell">${item.tunnelName}</td>
                    <td class="label-cell">${item.tunnelCode}</td>
                </tr>
            `;
            this.$$("#tunnel-filter-table").append(this.$$(tr));

            this.$$('#' + id).on("click", () => {
                this.app.dialog.confirm(`确认切换到 ${item.tunnelName} ?`, async () => {
                    this.utils.setLocalStorage("tunnel", item);
                    this.popup.close();
                    this.emitter.emit("tunnel-filter-close");
                });
            })
        }
    }

    page() {
        this.$$("#tunnel-filter-name").on("change", async () => {
            this.pageNo = 1;
            await this.getDataByPageNO();
        });

        this.$$("#tunnel-filter-popup-prev").on("click", async () => {
            this.delay('tunnel-filter-prev', async () => {
                if (this.pageNo > 1 ) {
                    this.pageNo = this.pageNo - 1;
                }
                await this.getDataByPageNO();
            }, 300);
        });

        this.$$("#tunnel-filter-popup-next").on("click", async () => {
            this.delay('tunnel-filter-next', async () => {
                if (this.pageNo < this.pageNum) {
                    this.pageNo = this.pageNo + 1;
                }
                await this.getDataByPageNO();
            }, 300);
        });

        this.$$("#tunnel-filter-popup-close").on("click", async () => {
            this.popup.close();
        });
    }

    init() {
        this.getDataByPageNO().then(() => {
            this.popup = this.app.popup.create({ el: '.tunnel-filter-popup' });
            this.popup.open();
        })
    }

    template() {
        const div = `
            <div class="popup tunnel-filter-popup" style="width: 600px; height: 550px;">
                <header>选择巷道</header>
                <article>
                    <div class="list inline-labels no-hairlines-md">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="mine-name">
                                            <input type="text" placeholder="请选择煤矿..." id="tunnel-filter-name">
                                        </label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="card data-table" style="height: 440px;">
                            <table>
                                <thead>
                                <tr>
                                    <th class="label-cell">#</th>
                                    <th class="label-cell">巷道名称</th>
                                    <th class="label-cell">巷道编码</th>
                                </tr>
                                </thead>
                                <tbody id="tunnel-filter-table"></tbody>
                            </table>
                        </div>
                    </div>
                </article>
                <a href="#" class="popup-closer" id="tunnel-filter-popup-close"></a>
            </div>
        `;
        this.$$('#app').append(div);
        this.$$(".tunnel-filter-popup").css('left', this.utils.left(600));
    }

    control() {
        this.page();
    }
}